<template>
  <el-main>
    <div id="bean" style="width: 1000px; height: 600px;">

    </div>
  </el-main>

</template>

<script>
import {getSearchMessageData, searchTenantManageList} from "@/api/housing/tenant";

export default {
  name: "index",
  data() {
    return{
      a: undefined,
      b: undefined,
      c: undefined,
      queryData: {
      }
    }
  },
  methods: {
    initData() {
      //初始化
      let element = document.getElementById("bean");
      //初始化echarts
      let init = this.$echarts.init(element);
      //绘制图标
      init.setOption(
        {
          title: { text: '房源报表可视化界面' },
          tooltip: {},
          xAxis: {
            data: ["整租（分散式）","合租（分散式）","单身公寓（集中式）"]
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [this.a,this.b,this.c]
          }]
        }
      )
      console.log(element);
    },
    crlist() {
      getSearchMessageData().then(res=>{
        console.log("房源信息:", res);
        this.a = res.data.a;
        this.b = res.data.b;
        this.c = res.data.c;
        this.initData();
      })
    }
  },
  mounted() {
    this.crlist();
  }
}
</script>

<style scoped>

</style>
